<template>
  <div>
    <tableComponents
      :pagination="{ currentPage, pageSize, total: list.all_num }"
      @handleCurrentChange="handleCurrentChange"
      @handleSizeChange="handleSizeChange"
      :searchData="userSearchData"
      :isHaveExport="false"
      :isHaveAdd="false"
      :isShow="false"
      :isHavePagination="false"
    >
      <template v-slot:table>
        <!-- :data="list.data" -->
        <el-table
          ref="multipleTable"
          :data="list"
          stripe
          v-loading="loading"
          header-row-class-name="head_color"
          tooltip-effect="dark"
          style="width: 99.8%"
          @selection-change="handleSelectionChange"
        >
          <!-- <el-table-column type="selection" class="tc" width="35"></el-table-column> -->
          <el-table-column type="selection" class="tc" width="35"></el-table-column>
          <el-table-column label="用户头像" align="center" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <div>
                  <img
                    :src="$fnc.getImgUrl(scope.row.avatar)"
                    style="width:80px;height:80px;border-radius:50%;"
                    alt
                  />
                </div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="用户名" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <small>{{ scope.row.username || "----" }}</small>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="用户昵称" min-width="120">
            <template slot-scope="scope">
              <div class="user_table">
                <small>{{ scope.row.nickname || "----" }}</small>
              </div>
            </template>
          </el-table-column>

          <el-table-column v-show="addClientId" width="300" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-show="addClientId"
                @click="addMineClient(scope.row.id)"
                type="success"
              >拉取</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template v-slot:footerLeft>
        <a class="aBtn aBtn_1 aBtn_lan2" v-show="addClientId" @click="addMoreClient()">拉取用户</a>
      </template>
    </tableComponents>
    <!-- <keep-alive>
      <component
        :is="current"
        :show="shows"
        :isAll="true"
        showType="list"
        @sendShop="getSend"
        @isshow="getShow"
      ></component>
    </keep-alive>-->
  </div>
</template>
<script>
import uploadpic from "@/components/page/pic/up_pic"; //上传图片
import { crm_ployee } from "@/assets/js/searchData/searchData"; //引入搜索的数据
import xzShop from "@/components/currency/xz_shop.vue";
export default {
  data() {
    return {
      userSearchData: crm_ployee,
      dialogeditVisible: false,
      dialogaddVisible: false,

      loading: false,
      list: [],
      allPage: 0,
      allNum: 0,
      pageSize: 10,
      currentPage: 1,
      searchAll: {},
      row: {},
      showCity: true,
      // 头像
      dialogImageUrl: "",
      dialogVisible: false,
      // 分类
      edmsgs: {},
      siteid: "",
      siteobj: {},
      changePriceFlag: false,
      nowPlace: "",
      timeMsg: [],
      wanna_del: "",
      multipleSelection: [], //多选框玄宗的值
      addClientId: "",
      addFlag: false,
    };
  },
  components: {
    uploadpic,
    xzShop,
  },
  mounted() {
    this.addClientId = this.$route.query.id ? this.$route.query.id : "";
    if (this.addClientId) {
      // alert("978467548");
    }
    this.getPublicUser();
  },
  methods: {
    addMineClient(id) {
      //
      let params = {};
      params.id = this.addClientId;
      params.id_str = id;
      this.$api.getCrm.addClient(params).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.$swal("拉取成功！", "您拉取了这个员工。", "success");
          this.getPublicUser();
          return;
        }
        this.$swal("拉取失败！", res.data.code_desc, "success");
      });
    },
    addMoreClient() {
      let id_str = "";
      this.multipleSelection.map((item) => {
        id_str += item.id + "@";
      });
      id_str = id_str.slice(0, id_str.length - 1);
      let params = {};
      params.id = this.addClientId;
      params.id_str = id_str;
      this.$api.getCrm.addClient(params).then((res) => {
        if (res.data.code == 200) {
          this.$swal("拉取成功！", "您拉取了这些员工。", "success");
          this.getPublicUser();
          return;
        }
        this.$swal("拉取失败！", res.data.code_desc, "success");
      });
    },
    getPublicUser(obj) {
      this.$api.getCrm.see_public_user(obj).then((res) => {
        // console.log("public", res);
        if (res.data.code == 200) {
          this.list = res.data.result;
        }
      });
    },
    sorta(a, b) {
      return b - a;
    },
    // 多选框赋值
    handleSelectionChange(val) {
      //多选框赋值
      // console.log(val);
      this.multipleSelection = val;
      // console.log(val);
    },
    // 删除

    receive_search(obj) {
      // console.log(obj)
      this.searchAll = obj;
      // this.getNewsAll(obj);
      this.getUserList(obj);
    },
    getNewsAll(params) {
      // console.log(1, params);
      // console.log("ccccc");
      params.id = this.$route.query.id;
      this.$api.getTask.getDoList(params).then((res) => {
        if (res.data.code === 200) {
          this.loading = false;
          this.list = res.data.result;
          // console.log(555);
          // console.log(this.list);
        }
      });
    },
    handleSizeChange(val) {
      var params = this.searchAll;
      params.page = "";
      params.page_size = val;
      this.getNewsAll(params);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      var params = this.searchAll;
      params.page = val;
      params.page_size = this.pageSize;
      this.getNewsAll(params);
    },

    reload() {
      this.getNewsAll(this.searchAll);
    },
    // 添加图片
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 删除
    beforeCreate() {},
  },
};
</script>

<style lang="less" scoped>
.myblank button {
  margin: 5px 5px 0 0;
}

.place {
  margin: 5px 0;
}
.is_item {
  display: flex;
  align-items: flex-end;
  .types {
    div {
      width: 200px;
      margin-right: 10px;
    }
    .input {
      margin: 5px 0px;
    }
    display: flex;
  }
  .btn_edit {
    height: 40px;
    margin-left: 10px;
    margin-bottom: 5px;
  }
}
.know_btn {
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important;
}
</style>
